import React, { useRef } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { TableListItem } from '@/components/Common/data.d';
import { queryOperationLog } from './service';
import {message} from "antd";
import {history} from "@@/core/history";
import { KeepAlive } from 'umi';
import DateTimeRange from "@/components/Common/DateTimeRange";


const TableList: React.FC<{}> = () => {
  const actionRef = useRef<ActionType>();
  // -------------加载表头 start -------------
  const columns: ProColumns<TableListItem>[] = [
    {
      title: '操作账号',
      dataIndex: 'username',
    },
    {
      title: '控制器',
      dataIndex: 'controller',
    },
    {
      title: '方法',
      dataIndex: 'action',
    },
    {
      title: '参数',
      dataIndex: 'params',
    },
    {
      title: '操作时间',
      dataIndex: 'dateTimeRange[]',
      renderFormItem: ()=><DateTimeRange />,
      hideInTable:true,
    },
    {
      title: '操作时间',
      dataIndex: 'log_date_time',
      sorter: true,
      valueType: "dateTime",
      hideInSearch:true,
    },
  ];
  // const paramsExt = {isTableTitle:1}; // 额外参数
  // -------------加载表头 end -------------

  return (
      <PageContainer>
        <KeepAlive>
        <ProTable<TableListItem>
          // headerTitle="测试"
          actionRef={actionRef}
          rowKey="key"
          search={{
            labelWidth: 80,
            // span:8,
          }}
          // params={paramsExt}
          request={async (params = {}, sorter, filter) =>
            queryOperationLog({ ...params, sorter, filter }).then(response => {
              // 处理数据
              if(response.status === 'error'){
                if(response.message==='loginAgain'){
                  message.error('登录时间过期将在5秒后跳转到登录页面');
                  setTimeout(() => {
                    history.push('/user/login');
                  }, 5000);
                }else {
                  message.error(response.message);
                }
              }
              return response;
            }).catch(info => {
              console.log('error', info);
            })
          }
          columns={columns}
          // manualRequest={true} // 手动触发首次请求
        />
        </KeepAlive>
      </PageContainer>

  );
};

export default TableList;
